<template>
  <q-select
    outlined
    :model-value="modelValue"
    @update:model-value="updateValue"
    label="充电桩ID"
    @filter="filterFn"
    :use-input="!modelValue"
    :options="options"
    clearable
    behavior="menu"
  />
</template>

<script>
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api";
import { ref } from "vue";

export default {
  name: "ChargerPose",
  props: {
    modelValue: String,
  },
  setup(props, context) {
    const chargers = ref([]);
    const options = ref([]);
    api.get(useAPIStore().centerUrl + "charger/devices").then((rs) => {
      chargers.value = rs.data.map((item) => {
        return item.id;
      });
    });

    return {
      options,
      updateValue(value) {
        context.emit("update:modelValue", value);
      },
      filterFn(val, update) {
        if (val === "") {
          update(() => {
            options.value = chargers.value;
          });
          return;
        }

        update(() => {
          const needle = val.toLowerCase();
          options.value = chargers.value.filter(
            (v) => v.toLowerCase().indexOf(needle) > -1
          );
        });
      },
    };
  },
};
</script>
